<template>
	<view style="position: relative; min-height: 100vh; height: 100%;">
		<video :src="video.videoAddress" class="video-play"></video>


		<view style="height: 100%;margin-top: 40vh; padding: 20rpx;">
			<view class="tip">
				在一下区域内进行文字和图片替换</view>

			<view style="margin-bottom: 30rpx;">
				<view v-for="item,index in textFormat">
					<view class="item-tip">请根据视频替换文本
					</view>
					<input type="text" placeholder="请输入内容" v-model="textFormat[index]" class="text-input">
				</view>

			</view>


			<view style="height: 100%; width: 100%;">

				<view style="margin-bottom: 50rpx;">
					<view class="item-tip">请根据视频替换图片
					</view>
					<view class="img-box">
						<view class="item" v-for="(item,index) in imgFormat" :key="index" style="margin-bottom: 20rpx;">
							<view style="position: relative; width: 300;height: 350rpx;" v-if="imgFormat[index] != ''">
								<image style="height: 350rpx; width: 300rpx;" :src="imgFormat[index]" mode="">
								</image>
								<view class="close-img" @click="deleteFormat(index)">
									删除
								</view>
							</view>
							<view class="upload-box" v-else>
								<image style="height: 100rpx; width: 100rpx;" src="../../static/images/xiangji.png"
									mode="" @click="addFormat(index)"></image>
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx; width: 100%;">

		</view>
		<view class="footer" style="">
			<view
				style="width: 90%; height: 90rpx; line-height: 90rpx; text-align: center; background-color: rgb(14, 16, 101); color: white; border-radius: 50rpx;"
				@click="forgeDemo">打造同款</view>
		</view>
	</view>
</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	const app = getApp()
	export default {
		data() {
			return {
				id: '',
				video: {},
				imgFormat: {},
				textFormat: {},
				videoCategory: '模板做爆款',
				shopId: '',
				videoDay: ''
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
			this.shopId = app.globalData.shopId;
			// 创建一个 Date 对象
			var today = new Date();
			// 获取月份（注意：getMonth 方法返回的月份是从 0 开始计数的，需要加1）
			var month = today.getMonth() + 1;
			// 获取日期
			var day = today.getDate();
			// 输出月份和日期
			this.videoDay = month + "月" + day + "日";
		},
		methods: {
			addFormat(id) {
				wx.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths
						console.log(tempFilePaths);
						http.temUpload(tempFilePaths[0]).then(res => {
							let a = JSON.parse(res.data);
							this.imgFormat[id] = 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + a
								.result.name;
						})
					}
				})
			},
			//清除图片
			deleteFormat(index) {
				this.$set(this.imgFormat, index, '');
			},
			isText(key) {
				return key.startsWith("Text");
			},
			//检查是否为文本
			isText(item) {
				return item.startsWith("Text");
			},
			forgeDemo() {
				let templateFormat0bj = Object.assign({},this.imgFormat,this.textFormat)
				let templateFormatString = JSON.stringify(templateFormat0bj);
				let imgFormatString = JSON.stringify(this.imgFormat);
				let textFormatString = JSON.stringify(this.textFormat);
				let obj = {
					title: this.video.title,
					imgFormat: imgFormatString,
					textFormat: textFormatString,
					templateFormat: templateFormatString,
					bitrate: 3,
					shopId: this.shopId,
				}
				console.log("=====>",obj);
				
				http.post('v1/system/Factory/add', obj).then(res => {
					let obj = {
						jobId: res.data.msg,
						shopId: this.shopId,
						videoInfo: templateFormatString,
						videoCategory: this.videoCategory,
						videoDay: this.videoDay,
					};
					http.post('v1/jiaoben/Job', obj).then(res => {
						uni.redirectTo({
							url: '/subpkg/mkvideo/myJianjiKu?id=' + res.data.data
						});
					});
				})
			},
			getInfo() {
				http.get("v1/system/Factory/" + this.id).then(res => {
					console.log(res);
					if (res.msg === '' || res.msg === null) {
						uni.showToast({
							title: '网络出错了~',
							icon: 'none'
						})
					} else {
						this.video = res.data.data;
						this.imgFormat = JSON.parse(res.data.data.imgFormat);
						this.textFormat = JSON.parse(res.data.data.textFormat);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-play {
		height: 40vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.tip {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		text-align: center;
		color: red;
	}

	.text-input {
		height: 70rpx;
		color: #333;
		flex: 1;
		background: #e3e3e3;
		font-size: 32rpx;
		border: 1px solid #999;
		border-radius: 10rpx;
		padding-left: 16rpx;
	}

	.item-tip {
		font-size: 28rpx;
		color: #4d4d4d;
		margin-bottom: 15rpx;
	}

	.close-img {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		color: red;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.img-box {
		width: 96%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 2%;
	}

	.upload-box {
		height: 350rpx;
		width: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #adadad;
	}
</style>